<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		    使用方法：1.用于表格中单元格垂直居中
			         2.用于行内元素以及行内块元素垂直居中
					 【文本和图片垂直居中（对齐）效果】
					 对齐分为四种：基线对齐、顶部对齐
					             居中对齐、底部对齐
					元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不可设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高--行套块
					            --块套块
								--块套行
					前提：一行内显示--行套快
					              --块套行  ×
								  --块套行  √
								  --行套快  √
		 -->
		 <style>
			img.i1{
				 /* vertical-align:baseline   默认基线对齐 */
				 vertical-align: baseline;
				 border: 2px solid red;
			 }
			img.i2{
				 /* vertical-align:top   顶部对齐*/
				 vertical-align: top;
			 }
			 img.i3{
				 vertical-align: middle;
			 }
			 img.i4{
				 vertical-align: bottom;
			 }
			 /* 问题：派生选择器，特点：找后代  p img */
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字  图片叫什么名字 
							文字后加img，设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐
							居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>哪吒1<img class="i1" src="img/1.png" alt="哪吒1"   width="100px"
		  height="100px"/>基线对齐</p>
		 <p>哪吒2<img 	class="i2" src="img/3.png" alt="哪吒2"   width="100px"
		  height="100px"/>顶部对齐</p>
		 <p>哪吒3<img class="i3" src="img/2.png" alt="哪吒3"   width="100px"
		  height="100px"/>居中对齐</p>
		 <p>哪吒4<img class="i4" src="img/4.png" alt="哪吒4"   width="100px"
		  height="100px"/>底部对齐</p>
		 <!-- css选择器--抓第一张图片。。。。
		 思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		 错误原因：html结构不符合派生特点：p包含4个img
		        伪类选择器，4个img需要在一个p中
		 p  img:nth-child(1)
		  
		  -->
	</body>
</html>